<template>
  <div class="test-tooltip">
    <h1>Tooltip 文字提示</h1>
    <h2>文字提示气泡框，在鼠标悬停时显示，代替了系统的 <code>title</code> 提示。</h2>
    <h2>基础用法</h2>
    <Tooltip content="这里是提示文字" style="color: #aaa">
      当鼠标经过这段文字时，会显示一个气泡框
    </Tooltip>
    <p>最简单的用法。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tooltip content=&quot;这里是提示文字&quot;&gt;
          当鼠标经过这段文字时，会显示一个气泡框
        &lt;/Tooltip&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {

            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>位置</h2>
    <div>
      <div class="top">
        <Tooltip content="Top Left 文字提示" placement="top-start">
          <Button>上左</Button>
        </Tooltip>
        <Tooltip content="Top Center 文字提示" placement="top">
          <Button>上边</Button>
        </Tooltip>
        <Tooltip content="Top Right 文字提示" placement="top-end">
          <Button>上右</Button>
        </Tooltip>
      </div>
      <div class="center">
        <div class="center-left">
          <Tooltip content="Left Top 文字提示" placement="left-start">
            <Button>左上</Button>
          </Tooltip><br><br>
          <Tooltip content="Left Center 文字提示" placement="left">
            <Button>左边</Button>
          </Tooltip><br><br>
          <Tooltip content="Left Bottom 文字提示" placement="left-end">
            <Button>左下</Button>
          </Tooltip>
        </div>
        <div class="center-right">
          <Tooltip content="Right Top 文字提示" placement="right-start">
            <Button>右上</Button>
          </Tooltip><br><br>
          <Tooltip content="Right Center 文字提示" placement="right">
            <Button>右边</Button>
          </Tooltip><br><br>
          <Tooltip content="Right Bottom 文字提示" placement="right-end">
            <Button>右下</Button>
          </Tooltip>
        </div>
      </div>
      <div class="bottom">
        <Tooltip content="Bottom Left 文字提示" placement="bottom-start">
          <Button>下左</Button>
        </Tooltip>
        <Tooltip content="Bottom Center 文字提示" placement="bottom">
          <Button>下边</Button>
        </Tooltip>
        <Tooltip content="Bottom Right 文字提示" placement="bottom-end">
          <Button>下右</Button>
        </Tooltip>
      </div>
    </div>
    <p>组件提供了12个不同的方向显示 <code>Tooltip</code> ，具体配置可查看 <code>API</code> 。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;div&gt;
          &lt;div class=&quot;top&quot;&gt;
            &lt;Tooltip content=&quot;Top Left 文字提示&quot; placement=&quot;top-start&quot;&gt;
              &lt;Button&gt;上左&lt;/Button&gt;
            &lt;/Tooltip&gt;
            &lt;Tooltip content=&quot;Top Center 文字提示&quot; placement=&quot;top&quot;&gt;
              &lt;Button&gt;上边&lt;/Button&gt;
            &lt;/Tooltip&gt;
            &lt;Tooltip content=&quot;Top Right 文字提示&quot; placement=&quot;top-end&quot;&gt;
              &lt;Button&gt;上右&lt;/Button&gt;
            &lt;/Tooltip&gt;
          &lt;/div&gt;
          &lt;div class=&quot;center&quot;&gt;
            &lt;div class=&quot;center-left&quot;&gt;
              &lt;Tooltip content=&quot;Left Top 文字提示&quot; placement=&quot;left-start&quot;&gt;
                &lt;Button&gt;左上&lt;/Button&gt;
              &lt;/Tooltip&gt;&lt;br&gt;&lt;br&gt;
              &lt;Tooltip content=&quot;Left Center 文字提示&quot; placement=&quot;left&quot;&gt;
                &lt;Button&gt;左边&lt;/Button&gt;
              &lt;/Tooltip&gt;&lt;br&gt;&lt;br&gt;
              &lt;Tooltip content=&quot;Left Bottom 文字提示&quot; placement=&quot;left-end&quot;&gt;
                &lt;Button&gt;左下&lt;/Button&gt;
              &lt;/Tooltip&gt;
            &lt;/div&gt;
            &lt;div class=&quot;center-right&quot;&gt;
              &lt;Tooltip content=&quot;Right Top 文字提示&quot; placement=&quot;right-start&quot;&gt;
                &lt;Button&gt;右上&lt;/Button&gt;
              &lt;/Tooltip&gt;&lt;br&gt;&lt;br&gt;
              &lt;Tooltip content=&quot;Right Center 文字提示&quot; placement=&quot;right&quot;&gt;
                &lt;Button&gt;右边&lt;/Button&gt;
              &lt;/Tooltip&gt;&lt;br&gt;&lt;br&gt;
              &lt;Tooltip content=&quot;Right Bottom 文字提示&quot; placement=&quot;right-end&quot;&gt;
                &lt;Button&gt;右下&lt;/Button&gt;
              &lt;/Tooltip&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;bottom&quot;&gt;
            &lt;Tooltip content=&quot;Bottom Left 文字提示&quot; placement=&quot;bottom-start&quot;&gt;
              &lt;Button&gt;下左&lt;/Button&gt;
            &lt;/Tooltip&gt;
            &lt;Tooltip content=&quot;Bottom Center 文字提示&quot; placement=&quot;bottom&quot;&gt;
              &lt;Button&gt;下边&lt;/Button&gt;
            &lt;/Tooltip&gt;
            &lt;Tooltip content=&quot;Bottom Right 文字提示&quot; placement=&quot;bottom-end&quot;&gt;
              &lt;Button&gt;下右&lt;/Button&gt;
            &lt;/Tooltip&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {

            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>自定义内容</h2>
    <Tooltip placement="top">
      <Button>多行</Button>
      <div slot="content">
        <p>显示多行信息</p>
        <p><i>可以自定义样式</i></p>
      </div>
    </Tooltip>
    <p>通过自定义 <code>slot</code> 显示多行文本或更复杂的样式。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tooltip placement=&quot;top&quot;&gt;
          &lt;Button&gt;多行&lt;/Button&gt;
          &lt;div slot=&quot;content&quot;&gt;
            &lt;p&gt;显示多行信息&lt;/p&gt;
            &lt;p&gt;&lt;i&gt;可以自定义样式&lt;/i&gt;&lt;/p&gt;
          &lt;/div&gt;
        &lt;/Tooltip&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
           data () {
             return {

             }
           }
        }
      &lt;/script&gt;
    </pre>
    <h2>可禁用</h2>
    <Tooltip placement="top" content="可以禁用文字提示" :disabled="disabled">
      <Button @click="disabled = true">点击关闭提示</Button>
    </Tooltip>
    <p>通过设置属性 <code>disabled</code> 可以禁用文字提示。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tooltip placement=&quot;top&quot; content=&quot;可以禁用文字提示&quot; :disabled=&quot;disabled&quot;&gt;
          &lt;Button @click=&quot;disabled = true&quot;&gt;点击关闭提示&lt;/Button&gt;
        &lt;/Tooltip&gt;
      &lt;/template&gt;
      &lt;script&gt;
          export default {
              data () {
                  return {
                      disabled: false
                  }
              }
          }
      &lt;/script&gt;
    </pre>
    <h2>可延时</h2>
    <Tooltip placement="top" content="Tooltip 文字提示" :delay="1000">
      <Button @click="disabled = true">延时1秒显示</Button>
    </Tooltip>
    <p>通过设置属性 <code>delay</code> 可以延时显示文字提示，单位毫秒。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tooltip placement=&quot;top&quot; content=&quot;Tooltip 文字提示&quot; :delay=&quot;1000&quot;&gt;
          &lt;Button @click=&quot;disabled = true&quot;&gt;延时1秒显示&lt;/Button&gt;
        &lt;/Tooltip&gt;
      &lt;/template&gt;
      &lt;script&gt;
        export default {
          data () {
            return {

            }
          }
        }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Tooltip props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <p>Tooltip slot</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>

<script>
export default {
  name: '',
  components: {

  },
  data () {
    return {
      disabled: false,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute',
          align: 'center'
        },
        {
          title: '说明',
          key: 'explain',
          align: 'center',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '默认值',
          key: 'default',
          align: 'center'
        }
      ],
      tableData: [
        {
          attribute: 'content',
          explain: '显示的内容',
          type: 'String | Number',
          default: '空'
        },
        {
          attribute: 'placement',
          explain: '提示框出现的位置，可选值为top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end',
          type: 'String',
          default: 'bottom'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用提示框',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'delay',
          explain: '延迟显示，单位毫秒',
          type: 'Number',
          default: '0'
        }
      ],
      tableColumn1: [
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '说明',
          key: 'instruc'
        }
      ],
      tableData1: [
        {
          name: '无',
          instruc: '主体内容'
        },
        {
          name: 'content',
          instruc: '提示框的内容，定义此 slot 时，会覆盖 props content。'
        }
      ]
    }
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 10px 0;
}
.top,.bottom{
  display: flex;
  text-align: center;
  justify-content: space-around;
  width: 500px;
}
.center{
  width: 500px;
  margin: 20px 0;
  overflow: hidden;
}
.center-left{
  float: left;
}
.center-right{
  float: right;
}
</style>
